<?php 
	if (!isset($listPoints))
	{
		echo '<b>You must define the list of the points!</b>';
	}	
?>


<div id="map_canvas" style="width: 600px; height: 400px"></div>

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
		
<script type="text/javascript">

	var map = null;

	$(function() 
	{
	    var myOptions = {
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        
		map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
						
			<?php 	
			
				$i = 0;
			
				foreach ($listPoints as $item)
				{	
					$teaser = isset($item->teaser) ? $item->teaser : $item->description;
					
					echo "var point$i = new google.maps.LatLng(".$item->lat.",".$item->lon.");\n";
					echo "\tvar marker$i = new google.maps.Marker({position: point$i,map: map});\n";
					echo "\tvar infowindow$i = new google.maps.InfoWindow({ content: \"<b>$item->name<b><br/>$teaser\" })\n";
					
					echo "google.maps.event.addListener(marker$i, 'click', function() {infowindow$i.open(map,marker$i);});\n";
					
					$i ++;
				}
			?>

		map.set_center(point0);
	});  
</script>